<template>
 <div >
      <div id="dog">
      <img :src="url" alt="">
      <p :style="{'background-color':bgcColor}" @click="changeColor">{{name}}</p>
      </div>
 </div>
</template>

<script>
export default {
    props:['url','name','index'],
    data(){
        return {
            bgcColor:'',
        }
    },
    methods:{
        changeColor(){
            this.bgcColor=`rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
            this.$emit('like',this.index)
        },

    }
}
</script>

<style>
#dog {
    width: 250px;
    height: 250px;
    border: 1px solid #000;
    text-align: center;
}
img {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}
</style>